/*
 * Swiper - Mobile Touch Slider CSS
 * http://www.idangero.us/sliders/swiper
 *
 * Vladimir Kharlampidi, The iDangero.us
 * http://www.idangero.us/
 * 
 * Copyright 2012-2013, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us
 *
 * Licensed under GPL & MIT
 *
*/

/* ===============================================================
Basic Swiper Styles 
================================================================*/
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}

/* Personalize style for the slideshow */

* {
	margin:0;
	padding:o;
}
img{
	width:100%;
}
.device {
	margin:0;
	position: relative;
}

.device .arrow-left, .device .arrow-right{	
	height: 123px;
	top: 15%;
	position: absolute;
	width: 49px;
}

.device .arrow-left {
  background: url(../Images/L_Arrow.png) no-repeat left top;
  left: 10px;
}
.device .arrow-right {
  background: url(../Images/R_Arrow.png) no-repeat right bottom;
  right: 10px;
}

.device .arrow-left:hover {
  background: url(../Images/L_Arrow_Hover.png) no-repeat left top;
}
.device .arrow-right:hover {
  background: url(../Images/R_Arrow_Hover.png) no-repeat right bottom;
}

.swiper-container {
	width: 90%;
}
/* FONT */
/* Quantico */
/* Regular */
@font-face {
    font-family: quantico;
    src: url('../Font/Quantico/quantico_r.eot');
    src: url('../Font/Quantico/quantico_r.eot?#iefix') format('embedded-opentype'),
         url('../Font/Quantico/quantico_r.woff') format('woff'),
         url('../Font/Quantico/quantico_r.ttf') format('truetype'),
         url('../Font/Quantico/quantico_r.svg#quanticobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Hallo Sans */
/* Light */
@font-face {
    font-family: hallo_sansLight;
    src: url('../Font/HalloSans/hallosans_l.eot');
    src: url('../Font/HalloSans/hallosans_l.eot?#iefix') format('embedded-opentype'),
         url('../Font/HalloSans/hallosans_l.woff') format('woff'),
         url('../Font/HalloSans/hallosans_l.ttf') format('truetype'),
         url('../Font/HalloSans/hallosans_l.svg#hallo_sansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}


.pagination {
  display:none;
}

.swiper-pagination-switch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #999;
  box-shadow: 0px 1px 2px #555 inset;
  margin: 0 3px;
  cursor: pointer;
}
.swiper-active-switch {
  background: #fff;
}

/* Skill block CSS */

.skillBlocks{
	border-radius:10px;
	border: 6px solid #c9c9c9; 
	height:240px;
	margin:0 auto;
	width:240px;
}
.skillBlocks p{
	display:none;
}
.skillBlocks:hover p{
	color:#434343;
	display:block;
	font-family:hallo_sansLight;
	font-size:25px;
	padding: 20px 10px 0;
	text-align:left;
	width:220px;
}
.skillBlocks h3{
	color:#fff;
	font-family:quantico;
	font-size:30px;
	font-variant:small-caps;
	margin-top:20px;
	text-align:center;
}
.skillBlocks:hover h3{
	display:none;
}
/* Fire Pulse */
#firePulse.skillBlocks{
	background:#000 url(../Images/firePulse_Front.png) no-repeat center 90px;
}
#firePulse.skillBlocks:hover{
	background:#fff url(../Images/firePulse_Back.png) no-repeat center 180px;
}
/* Jaw Fall */
#jawFall.skillBlocks{
	background:#000 url(../Images/jawFall_Front.png) no-repeat center 90px;
}
#jawFall.skillBlocks:hover{
	background:#fff url(../Images/jawFall_Back.png) no-repeat center 180px;
}
/* Eclipse */
#eclipse.skillBlocks{
	background:#000 url(../Images/eclipse_Front.png) no-repeat center 70px;
}
#eclipse.skillBlocks:hover{
	background:#fff url(../Images/eclipse_Back.png) no-repeat center 180px;
}
/* Pisky Box */
#peskyBox.skillBlocks{
	background:#000 url(../Images/peskyBox_Front.png) no-repeat center 70px;
}
#peskyBox.skillBlocks:hover{
	background:#fff url(../Images/peskyBox_Back.png) no-repeat center 180px;
}
/* Deflector */
#deflector.skillBlocks{
	background:#000 url(../Images/deflector_Front.png) no-repeat center 75px;
}
#deflector.skillBlocks:hover{
	background:#fff url(../Images/deflector_Back.png) no-repeat center 180px;
}
/* Time Zone */
#timeZone.skillBlocks{
	background:#000 url(../Images/timeZone_Front.png) no-repeat center 75px;
}
#timeZone.skillBlocks:hover{
	background:#fff url(../Images/timeZone_Back.png) no-repeat center 200px;
}



/******************************** 1263px **********************************/

@media all and (min-width: 1263px){
	.device{
		height:425px;
	}
	.swiper-container{
		height:425px;
	}
	.device .arrow-left, .device .arrow-right,.device .arrow-left:hover, .device .arrow-right:hover{
		background-size:80%;
	}
}

@media all and (max-width: 600px){
	.device,.swiper-container,.swiper-wrapper{
		height:250px;
	}
	.device .arrow-left, .device .arrow-right{
	height:83px;
		width:23px;
		top:30%;
		z-index:10;
	}
	.device .arrow-left {
		background: url(../Images/L_Arrow_mobile.png) no-repeat left top;
		left: 4%;
	}
	.device .arrow-right {
		background: url(../Images/R_Arrow_mobile.png) no-repeat right top;
		right: 4%;
	}
	.device .arrow-left:hover {
		background: url(../Images/L_Arrow_Hover_mobile.png) no-repeat left top;
	}
	.device .arrow-right:hover {
		background: url(../Images/R_Arrow_Hover_mobile.png) no-repeat right top;
	}
}

